<div style="min-width:1000px;">
  <nz-breadcrumb class="breadcrumb-pos">
    <i nz-icon type="link" theme="outline" style="color:#1890FF;padding-right:4px"></i>
    <nz-breadcrumb-item>
      工单管理
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <div nz-row [nzGutter]="16" style="border-bottom: 1px solid #ccc;margin-bottom: 8px;min-width: 800px;">
    <div nz-col [nzSpan]="4">
      <nz-form-item nzFlex>
        <nz-form-label>工单号</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="taskId">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="4">
      <nz-form-item nzFlex>
        <nz-form-label>租赁客户</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="companyName">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="4">
      <nz-form-item nzFlex>
        <nz-form-label>维修员</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="maint">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="3">
      <nz-form-item nzFlex>
        <nz-form-label>状态</nz-form-label>
        <nz-select [(ngModel)]="status" style="margin-top:3px;">
          <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
          <nz-option [nzLabel]="'未派单'" [nzValue]="'0'"></nz-option>
          <nz-option [nzLabel]="'已派单'" [nzValue]="'1'"></nz-option>
          <nz-option [nzLabel]="'已接单'" [nzValue]="'2'"></nz-option>
          <nz-option [nzLabel]="'已完成'" [nzValue]="'3'"></nz-option>
        </nz-select>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item nzFlex>
        <nz-form-label>派单时间</nz-form-label>
        <nz-form-control>
          <nz-range-picker [(ngModel)]="date"></nz-range-picker>
        </nz-form-control>
        <button nz-button [nzType]="'primary'" [nzLoading]="btn_loading" style="margin:3px 0 0 20px;"
          (click)="getTasklist()">查询</button>
      </nz-form-item>
    </div>
  </div>

  <div class="add_btn">
    <button nz-button style="float:right" (click)="exportOut()">导出Excel</button>
  </div>
  <nz-table #basicTable [nzData]="tasklist" [nzLoading]="loading" [nzShowPagination]="false" [nzBordered]="true">
    <thead>
      <tr>
        <th>工单号</th>
        <th>租赁客户</th>
        <th>维修员</th>
        <th>故障条数</th>
        <th>预警条数</th>
        <th>状态</th>
        <th>派单时间 <hr> 完成时间</th>
        <th>添加时间 <hr> 修改时间</th>
        <th nzWidth="100px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of tasklist">
        <td>{{data.number}}</td>
        <td>{{userinfo[data.userId].companyName}}</td>
        <td>{{data.maintId?maintinfo[data.maintId].name:"-"}}</td>
        <td>{{data.faultNum}}</td>
        <td>{{data.warnNum}}</td>
        <td>{{data.statusStr}}</td>
        <td>{{data.startDate?data.startDate:"--"}} <hr> {{data.finishDate?data.finishDate:"--"}}</td>
        <td>{{data.dateAdd.slice(0,10)}} <hr> {{data.dateUpdate?data.dateUpdate.slice(0,10):"--"}}</td>
        <td>
          <a style="color:rgb(24, 130, 230);margin-right:12px;" routerLink="/main/taskinfo/{{data.id}}">详情</a>
          <a *ngIf="data.status ==0" style="color:rgb(24, 230, 203);margin-right:12px;"
            (click)="patchMaint(data.id)">指派</a>
          <a *ngIf="data.status ==1 || data.status ==2" style="color:rgb(24, 230, 203);margin-right:12px;"
            (click)="confirm(data.id)">指派</a>
          <nz-popconfirm *ngIf="data.status ==1 || data.status ==2" [nzTitle]="'确定要该任务工单已完成么?'"
            (nzOnConfirm)="closeTask(data.id)">
            <a nz-popconfirm style="color:rgb(230, 65, 24);">完成</a>
          </nz-popconfirm>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <nz-pagination style="float:right;margin-top:12px" [nzPageIndex]="PageIndex" [nzPageSize]="PageSize"
    [nzTotal]="PageTotal" (nzPageIndexChange)="PageIndexChange($event)" [nzHideOnSinglePage]="true"
    [nzShowTotal]="totalTemplate"></nz-pagination>
  <ng-template #totalTemplate let-total>
    共 {{total}} 条数据
  </ng-template>
  <nz-modal [(nzVisible)]="isVisible" nzTitle="指派维修员" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    <div nz-row style="width:300px;">
      <nz-form-label nz-col nzSpan="12" nzRequired nzFor="patch">指派维修员</nz-form-label>
      <nz-select nz-col nzSpan="12" [(ngModel)]="patchValue" style="margin-top:5px;">
        <nz-option *ngFor="let data of maintlist" nzLabel="{{data.name}}" nzValue="{{data.id}}"></nz-option>
      </nz-select>
      <nz-form-explain class="checkResult" *ngIf="patchcode==-1">请选择要指派的维修员!</nz-form-explain>
    </div>
  </nz-modal>
</div>